<template>
    <div class="contaier">
        <van-nav-bar title="30天上班族保健计划" left-text="" @click-left="onClickLeft" left-arrow sticky>
            <template #right>
                <img src="../../assets/分享.png" alt="" style="width: 30px;height: 30px;">
            </template>
        </van-nav-bar>
        <div>
            <div class="cultiavtion">
                <div class="cult-img">
                    <img src="../../assets/img/养成6.png" alt="" />
                </div>
                <van-tabs v-model:active="active" class="act" sticky>
                    <van-tab title="介绍">
                        <div class="cult">
                            <div class="cult-box">
                                <div class="cult-left" style="margin-top: 10px;"> <span
                                        style="color: #39d167;margin-left: 10px;">•</span> 难度系数:
                                </div>
                                <div class="cult-right" style="margin-top: 10px;">
                                    &nbsp; &nbsp;<van-icon name="star"
                                        style="color:#ffa800 !important;; z-index: 99999 " />
                                </div>
                            </div>

                            <div class="cult-box">
                                <div class="cult-left">
                                    <span style="color: #39d167;margin-left: 10px;">•</span> 适用人群:
                                </div>
                                <div class="cult-right">
                                    &nbsp; &nbsp;上班族、学生
                                </div>
                            </div>

                            <div class="cult-box">
                                <div class="cult-left"> <span style="color: #39d167;margin-left: 10px;">•</span>
                                    预期效果:
                                </div>
                                <div class="cult-right">
                                    &nbsp; &nbsp;缓解各种疲劳
                                </div>
                            </div>
                            <div style="border-top: 1px solid #f4f4f4;margin-top: 10px;width: 90%;">
                                <div style="margin-top: 10px;">
                                    <p style="padding-right: 0px;font-size: 16px;">
                                        早饭不吃、午饭吃完就休息、晚上加班随便吃,一不小
                                    </p>
                                    <p style="padding-right: 5px;font-size: 16px;margin-top: 5px">
                                        心就闹出了胃部毛病。</p>
                                    <p style="margin-top: 5px">上班久坐不动、在家能不动就不动，更别说专门去健</p>
                                    <p style="margin-top: 5px">身，稍不留意小肚腩、大粗腿就出来了</p>
                                    <p style="margin-top: 5px;margin-right: -24px;">怎么舒服怎么坐、翘个二郎腿、弯个腰驼个背、眼睛都</p>
                                    <p style="margin-top: 5px;">快贴屏幕上,这些不健康的习惯,看看自己符合几条？</p>
                                    <p style="margin-top: 5px">“你说的我都知道,就是没时间做”,不要为内心的小懒</p>
                                    <p style="margin-top: 5px">人找借口啦，上班族保健计划就是专门为你准备的。</p>
                                    <p style="margin-top: 5px">本套方案,就是针对你日常不注意的小问题，从饮食、</p>
                                    <p style="margin-top: 5px;margin-right: -24px;">运动、局部保健小动作以及皮肤护理等方面, 以每天简</p>
                                    <p style="margin-top: 5px">单小任务的形式帮你养成科学、健康地工作和生活习</p>
                                    <p style="margin-top: 5px">惯，也帮你解除小困扰。</p>
                                    <p style="margin-top: 5px">从今天开始，坚持起来吧。</p>
                                </div>
                            </div>
                            <div class="center" style="position: relative;">
                                <h3 style="font-weight: 550;">分享评论</h3>
                                <div class="top" style="position: absolute;">
                                    <div class="top_item" style="position: absolute;">
                                        <img src="../../assets/hei.jpg" alt=""
                                            style="width: 40px;height: 40px;margin-left: 10px;border-radius: 50%;" />
                                        <span
                                            style="margin-top: -40px;display:flex;margin-left: 70px;font-weight: 700;">拾春光</span>
                                        <span style="margin-top: 1px;display:flex;margin-left: 70px;font-size: 12px;
                                          color: #a0a0a0;">3-16 13:11</span>
                                    </div>
                                </div>
                                <div class="bottom">
                                    <p style="padding-left: 67px;margin-top: 5px;font-size: 14px;">
                                        完成了<span style="color: #58d980;">#30天上班族保健计划#</span>全部任务</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                        现在连开车都时刻告诉自己：抬头！挺胸！收腹！沉</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                        肩！向驼背say no!</p>
                                </div>
                                <div class="top" style="position: absolute;">
                                    <div class="top_item" style="position: absolute;">
                                        <img src="../../assets/nv.jpg" alt=""
                                            style="width: 40px;height: 40px;margin-left: 10px;border-radius: 50%;" />
                                        <span
                                            style="margin-top: -40px;display:flex;margin-left: 70px;font-weight: 700;">德鲁依</span>
                                        <span style="margin-top: 1px;display:flex;margin-left: 70px;font-size: 12px;
                                          color: #a0a0a0;">3-14 23:01</span>
                                    </div>
                                </div>
                                <div class="bottom1">
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                        完成了<span style="color: #58d980;">#30天上班族保健计划#</span>全部任务</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                        小知识还是很不错的，</p>
                                </div>
                                <div class="top" style="position: absolute;">
                                    <div class="top_item" style="position: absolute;">
                                        <img src="../../assets/huang.jpg" alt=""
                                            style="width: 40px;height: 40px;margin-left: 10px;border-radius: 50%;" />
                                        <span
                                            style="margin-top: -40px;display:flex;margin-left: 70px;font-weight: 800;">阳光倾城，未必温暖</span>
                                        <span style="margin-top: 1px;display:flex;margin-left: 70px;font-size: 12px;
                                          color: #a0a0a0;">3-14 18:04</span>
                                    </div>
                                </div>
                                <div class="bottom1">
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                        完成了<span style="color: #58d980;">#30天上班族保健计划#</span>全部任务</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                        每天带着颈圈在办公室转转转，终于也开始尝试做一</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                        些保健计划。春雨一向印象不错，虽然强度比较低</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                        但是易于完成，每天看一看还是得到了很多好的生活</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                        常识。</p>
                                </div>
                            </div>

                        </div>
                    </van-tab>
                    <van-tab title="目录">
                        <div class="day">
                            <div class="day1"><b>共30日</b></div>
                            <div class="day2">
                                <ul>
                                    <li>01日</li>
                                    <li class="hj" style="margin-left: -176px;">防止鼠标手，操练起来</li>
                                </ul>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">

                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>02日</li>
                                        <li class="hj" style="margin-left: -160px;">饭后半个小时不剧烈运动</li>
                                    </ul>
                                    <div
                                        style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -10PX;">

                                    </div>
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>03日</li>
                                        <li class="hj" style="margin-left: -212px;">午睡吧！皮卡丘！</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 0.5px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">

                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>04日</li>
                                        <li class="hj" style="margin-left: -205px;">士可杀，尿不可忍！</li>
                                    </ul>
                                    <div
                                        style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                    </div>
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>05日</li>
                                        <li class="hj" style="margin-left: -220px;">早晨吃点粗粮吧！</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>

                                        <li>06日</li>
                                        <li class="hj" style="margin-left: -255px;">睡够八个小时</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>07日</li>
                                        <li class="hj" style="margin-left: -163px;">记得吃早餐，不要吃太油腻</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>08日</li>
                                        <li class="hj" style="margin-left: -255px;">早起喝杯白开水</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>09日</li>
                                        <li class="hj" style="margin-left: -232px;">早上起来上个厕所</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>10日</li>
                                        <li class="hj" style="margin-left: -155px;">下午三点之后，和咖啡说拜拜</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>11日</li>
                                        <li class="hj" style="margin-left: -226px;">早饭来个鸡蛋吧！</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>12日</li>
                                        <li class="hj" style="margin-left: -210px;">别老固定一只手提包</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>13日</li>
                                        <li class="hj" style="margin-left: -280px;">上班走楼梯</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>14日</li>
                                        <li class="hj" style="margin-left: -210px;">边走边吃，才不要！</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>15日</li>
                                        <li class="hj" style="margin-left: -200px;">仰卧起坐，别着急做？</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                   <div style="margin-top: 15px;">
                                    <ul>
                                        <li>16日</li>
                                        <li class="hj" style="margin-left: -230px;">调整电脑屏幕距离</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                   <div style="margin-top: 15px;">
                                    <ul>
                                        <li>17日</li>
                                        <li class="hj" style="margin-left: -210px;">蹲测试不超过10分钟</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                   <div style="margin-top: 15px;">
                                    <ul>
                                        <li>18日</li>
                                        <li class="hj" style="margin-left: -166px;">控制糖量，和甜饮料说拜拜</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                   <div style="margin-top: 15px;">
                                    <ul>
                                        <li>19日</li>
                                        <li class="hj" style="margin-left: -185px;">暴饮暴食？我不干这个事</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                   <div style="margin-top: 15px;">
                                    <ul>
                                        <li>20日</li>
                                        <li class="hj" style="margin-left: -250px;">快步走超5000步</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                   <div style="margin-top: 15px;">
                                    <ul>
                                        <li>21日</li>
                                        <li class="hj" style="margin-left: -190px;">什么时候都不能忘了防晒</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                   <div style="margin-top: 15px;">
                                    <ul>
                                        <li>22日</li>
                                        <li class="hj" style="margin-left: -290px;">用温水洗脸</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                   <div style="margin-top: 15px;">
                                    <ul>
                                        <li>23日</li>
                                        <li class="hj" style="margin-left: -240px;">包里面放几块糖果</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                   <div style="margin-top: 15px;">
                                    <ul>
                                        <li>24日</li>
                                        <li class="hj" style="margin-left: -240px;">急救小腿，不抽筋</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                   <div style="margin-top: 15px;">
                                    <ul>
                                        <li>25日</li>
                                        <li class="hj" style="margin-left: -220px;">3公里以内步行上下班</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                   <div style="margin-top: 15px;">
                                    <ul>
                                        <li>26日</li>
                                        <li class="hj" style="margin-left: -270px;">挺胸抬头走路</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                   <div style="margin-top: 15px;">
                                    <ul>
                                        <li>27日</li>
                                        <li class="hj" style="margin-left: -280px;">慢慢吃顿饭</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                   <div style="margin-top: 15px;">
                                    <ul>
                                        <li>28日</li>
                                        <li class="hj" style="margin-left: -220px;">自备午餐别选绿叶饭</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                   <div style="margin-top: 15px;">
                                    <ul>
                                        <li>29日</li>
                                        <li class="hj" style="margin-left: -280px;">慢跑10分钟</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                   <div style="margin-top: 15px;">
                                    <ul>
                                        <li>30日</li>
                                        <li class="hj" style="margin-left: -280px;">今天不抽烟</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                            </div>
                        </div>
                    </van-tab>

                </van-tabs>
            </div>

        </div>
    </div>
    <div style="width: 95%;height: 100px;background-color: white;position: fixed;bottom: 0;left: 7px;">
        <button style="width: 98%;height: 50px;background-color:#39d167;margin-top: 42px;border: none;
        outline: none;color: white;position: absolute;left: 5px;border-bottom: 0px;">加入计划</button>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const active = ref(0);
const onClickLeft = () => {
    router.push({ path: "/jiankang" })
}
</script>

<style lang="scss" scoped>
:deep(.van-icon) {
    color: #000 !important
}

.cultiavtion {
    position: relative;
    width: 100%;
    height: 1500px;
    overflow: hidden;

    .cult-img {
        width: 100%;
        height: 150px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .cult {
        .cult-box {
            width: 120%;
            height: 42px;
        }

        .cult-left {
            float: left;
            height: 40px;
            text-align: center;
            padding-top: 10px;
        }

        .cult-right {
            float: left;
            height: 40px;
            width: 70%;
            text-align: left;
            padding-top: 10px;
        }
    }
}

[data-v-ca42e025] .van-icon {
    color: #ffa800 !important;
}

:deep(.van-tabs__line) {
    position: absolute;
    bottom: 15px;
    left: 0;
    z-index: 1;
    background: #39d167;
    border-radius: var(--van-tabs-bottom-bar-height);
}

.day {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    margin-left: 15px;

    .day1 {
        width: 100%;
        height: 30px;
        font-size: 19px;
        margin-left: 1px;
    }

    .day2 {
        width: 100%;
        height: 480px;
        margin-top: 15px;
        overflow-y: scroll;

        ul {
            height: 50px;
            display: flex;
            justify-items: center;

            li {
                color: #a7a7a7;
                margin-left: 1px;
            }

            .hj {
                margin-left: -150px;
            }
        }
    }
}

.center {
    h3 {
        margin-top: 60px;
        margin-left: 10px;
        margin-bottom: 25px;
    }

    .top {
        position: absolute;
        width: 100%;
        height: 50px;

        .top_item {
            // background-color: red;
            position: absolute;
            width: 100%;
            height: 50px;
        }

        // background-color: red;
    }

    .bottom {
        margin-top: 75px;
        width: 100%;
        height: 90px;
        // background-color: gray;
        border-bottom: 1px solid #f4f4f4;
    }

    .bottom1 {
        margin-top: 40px;
        width: 100%;
        height: 70px;
        border-bottom: 1px solid #f4f4f4;
    }

    .bottom2 {
        // margin-top: 75px;
        width: 100%;
        height: 120px;
        // background-color: gray;
        border-bottom: 1px solid #f4f4f4;
    }
}
</style>